<!DOCTYPE html>
<html>
<head>
	<title>Captions</title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width">

	<!-- jQuery, -->
	<script src="jquery/jquery-1.9.1.min.js"></script>

	<!-- Fotorama -->
	<link  href="../out/fotorama.css" rel="stylesheet">
	<script src="../out/fotorama.js"></script>

  <script type="text/javascript">
    $(function () {
      f = $('.fotorama').fotorama({captions: false}).data('fotorama');
    })
  </script>
</head>

<body>

<p>Captions:<p>
<pre style="margin-top: -1em; margin-left: 1em;"><code>&lt;div class="fotorama">
  &lt;img src="1.jpg" <mark>data-caption="My first photo"</mark>>
&lt;/div></code></pre>

<!-- Just don’t want to repeat this prefix in every img[src] -->
<base href="i/nyc/">


<!-- Fotorama -->
<div class="fotorama"
     data-auto="false"
     data-width="500"
     data-ratio="3/2"
     data-max-width="100%">
	<a href="guy-in-car.jpg" data-caption="Guy in car"></a>
	<a href="acapella.jpg" data-caption="<a href='http://acapella.com/' target='_blank'>Acapella</a>"></a>
	<a href="crazyjohn.jpg" data-caption="Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur dicta dignissimos error illum modi nemo quisquam? Consequuntur ex excepturi laudantium reiciendis, suscipit temporibus voluptate. Eos esse est libero nisi voluptates."></a>
	<a href="dudeintheground.jpg" data-caption="Dude in the ground"></a>
	<a href="dudes.jpg" data-caption="Dudes"></a>
	<a href="explanation.jpg" data-caption="Explanation"></a>
	<a href="eyes.jpg" data-caption="Eyes"></a>
	<a href="facing-wind.jpg" data-caption="Facing wind"></a>
	<a href="father-son-looking.jpg" data-caption="Father son looking"></a>
	<a href="flipoff.jpg" data-caption="Flip off"></a>
	<a href="freakout.jpg" data-caption="Freak out"></a>
	<a href="guy-in-park.jpg" data-caption="Guy in park"></a>
	<a href="homeless-sleeping.jpg" data-caption="Homeless sleeping"></a>
	<a href="italianguy.jpg" data-caption="Italian guy"></a>
	<a href="KIOSK.jpg" data-caption="Kiosk"></a>
	<a href="ladies-riding.jpg" data-caption="Ladies riding"></a>
	<a href="lift-dude.jpg" data-caption="Lift dude"></a>
	<a href="severedhead-lo.jpg" data-caption="Severed head"></a>
	<a href="smoking.jpg" data-caption="Smoking"></a>
	<a href="streetlook.jpg" data-caption="Streetlook"></a>
	<a href="two-umbrellas.jpg" data-caption="Two umbrellas"></a>
	<a href="woman-reading.jpg" data-caption="Woman reading"></a>
</div>

<!-- © -->
<p>Photos <a href="http://alexeilebedev.com/">by Alexei Lebedev</a></p>
</body>
</html>